<template>
    <div id="header">
        <el-header>
            <router-link to="/">
                <img src="../assets/logo.png" style="width: 20%">
            </router-link>
        </el-header>
        <div id="menu">
            <div>
                <router-link to="/wishRecommend" ><el-button :class="{active:!isActive}" icon="el-icon-position" >志愿推荐</el-button></router-link>
                <router-link to="/college"><el-button :class="{active:!isActive}" icon="el-icon-school">大学查询</el-button ></router-link>
                <router-link to="/provinceAdmit"><el-button :class="{active:isActive}" icon="el-icon-data-line">省分数线</el-button></router-link>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                isActive:true,
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: rgb(238, 245, 249);
        text-align: center;
        height: 70px !important;
    }
    #menu{
        /*padding: 40px 40px 10px 0;*/
        text-align: right;
        background-color: white;
    }
    .el-button{
        font-family: 华文楷体;
        font-size: 20px;
        color: #555b5c;
        margin: 30px;
        border: none;
    }
    .el-button:hover{
        font-size: 21px;
        color: #5dabf7;
    }
    #header{
        margin: 0 100px;
    }
    .router-link:visited{
        color: #5dabf7;
    }
    .active{
        font-size: 21px;
        font-weight: 900;
        color: #5dabf7;
    }
</style>